<template>
    <div class="wrap">
        <cover-image 
            class="banner" 
            :src="require('@/assets/images/topic.jpg')" 
            :webp="false" size=""></cover-image>
        <div class="main">
            <div class="head">
                <div class="title">{{ title }}</div>
                <van-button class="subscribe" size="small" @click="handleSubscribe">
                    <i class="fa fa-plus"></i> 订阅
                </van-button>
            </div>
            <div class="body">
                <em>{{ formatNumber(view) }}</em>浏览<em>{{ formatNumber(discuss) }}</em>讨论
            </div> 
            <div v-if="activeUsers.length > 0" class="foot">
                <div class="list">                    
                    <avatar 
                        class="face"
                        v-for="item in activeUsers.slice(0,5)"
                        :key="item.user_info.uid" 
                        :src="item.user_info.face"
                        :vip="item.user_info.vip.vipStatus"
                        :offical="item.user_info.official_verify" 
                        size="small" 
                        @click="handleSpace(item.user_info.uid)"
                    ></avatar>
                </div>
                <span class="more" @click="handlePopup">更多活跃用户<i class="fa fa-dropdown"></i></span>
            </div>                                  
        </div>

        <van-popup
            ref="popupRef"
            class="user-popup"
        >
            <template #title>
                <span>更多活跃用户</span>
            </template>
            <ul class="user-list">
                <li 
                 v-for="item in activeUsers" 
                 :key="item.user_info.uid" 
                 @click="handleSpace(item.user_info.uid)"
                >
                    <avatar 
                        class="face"
                        :src="item.user_info.face"
                        :vip="item.user_info.vip.vipStatus"
                        :offical="item.user_info.official_verify" 
                        size="small" 
                    ></avatar>
                    <span class="name">{{ item.user_info.uname }}</span>
                </li>                        
            </ul>
        </van-popup>
    </div>
</template>

<script>
import { reactive, computed, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { Button as VanButton, Toast } from 'vant'
import VanPopup from '@/components/Popup'
import CoverImage from '@/components/CoverImage'
import Avatar from '@/components/Avatar'
import { formatNumber } from '@/utils'
export default {
    name: 'TopicInfo',
    components: {
        CoverImage,
        VanPopup,
        VanButton,
        Avatar
    },
    props: {
        info: {
            type: Object
        },
        infoCount: {
            type: Object
        }
    },
    setup(props) {
        const router = useRouter()
        const params = reactive({
            popupRef: null,
            title: computed(() => {
                return props.info ? props.info.tag_name : ''
            }),
            view: computed(() => {
                return props.infoCount ? (props.infoCount.view_count || 0) : 0
            }),
            discuss: computed(() => {
                return props.infoCount ? (props.infoCount.discuss_count || 0) : 0
            }),
            activeUsers: computed(() => {
                return props.infoCount ? (props.infoCount.active_users || []) : []
            })
        })

        const handleSubscribe = () => {
            Toast('功能待开发')
        }
        const handlePopup = () => {
            params.popupRef.show()
        }

        const handleSpace = mid => {
            router.push({
                name: 'space',
                params: {
                    mid
                }
            })
        }

        return {
            ...toRefs(params),
            handleSubscribe,
            handlePopup,
            handleSpace,
            formatNumber
        }
    }
}
</script>

<style lang="scss" scoped>
.banner{
    padding-bottom: 176/750*100%;
}
.wrap {
    .main {
        padding: 12px 16px;
    }
    .head {
        display: flex;
        .title{
            flex: 1;
            font-size: 16px;
        }
        .subscribe{
            color: $theme-color;
        }
    }
    .body{
        font-size: 14px;
        color: $color-text-secondary;
        em{
          margin-right: 5px;
          font-style: normal;
          color: $color-text-primary;
          ~em{
            margin-left: 15px;
          }
        }
    }
    .foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        @include border1px(#e7e7e7, 1px 0 0 0);
        .list{
            display: flex;
            .face{
                margin-right: 5px;
            }
        }
        .more{
            font-size: 12px;
            color: $color-text-secondary;
        }
    }    
}
.user-list {
    li {
      display: flex;
      align-items: center;
      padding: 10px;
      font-size: 14px;
      color: $color-text-regular;
      .face{
        margin-right: 10px;
      }
    }
}

.user-popup{
    .am-modal-title {
        font-size: 15px;
        text-align: left;
    }
}

@media screen and (orientation:portrait) {
    .user-popup{
      top: 255px;
    }
  }
</style>